<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    * { margin: 0; padding: 0;}
    #box {
      width: 500px;
      height: 500px;
      border: 2px solid deeppink;
    }
  </style>
</head>

<body>
  <!-- <button id='btn'> 请求位置信息 </button>
  <div id="box"></div> -->
  	<label>是否支持系统定位功能：</lable><label id="msg"></label>
	
	<div >
		<label>经纬度位置：</label><a id="sys_lng_lat" style="color: darkblue;"></a>
		<button onclick="copyText()" style="background-color: #0fe352;font-size: medium;">复制经纬度</button>
	</div>
	
	<!-- <label>详细参数：</lable> -->
	<p  id="content" style="color:rgb(46, 8, 235)"></p>
	<p  id="error_info" style="color: crimson;"></p>
	<!-- <p id="shuoming" style="color:rgb(46, 8, 235)"></p> -->
  <script>

    //点击按钮获取地理位置信息
      //getCurrentPosition与定时器setInterval类似多次请求，因为位置需要不间断的获取
      //直接navigator.geolocation表示单次获取位置
      navigator.geolocation.getCurrentPosition(function (position) {
		document.getElementById("msg").innerHTML = "支持";
		str=position.coords.longitude+","+position.coords.latitude;
		document.getElementById("sys_lng_lat").innerHTML = str;
        var position_msg = "其他参数：<br>";
        position_msg += "准确度：	" + position.coords.accuracy + "<br>";
        position_msg += "海拔：	" + position.coords.altitude + "<br>";
        position_msg += "海拔准确度：	" + position.coords.altitudeAcuracy + "<br>";
        position_msg += "行进方向：	" + position.coords.heading + "<br>";
        position_msg += "地面速度：	" + position.coords.speed + "<br>";
        position_msg += "请求的时间：	" + new Date(position.timestamp) + "<br>";
		document.getElementById("content").innerHTML = position_msg;
      }, function (err) {
		document.getElementById("msg").innerHTML = "不支持";
        // alert("code：返回获取位置的状态："+err.code);
		var error_msg = "code:"+err.code;
		switch (err.code) { 
			case 0:error_msg += "不包括其他错误编号中的未知错误"; 
			break; 
			case 1:error_msg += "用户拒绝浏览器获取位置信息"; 
			break; 
			case 2:error_msg += "尝试获取用户信息，但失败了"; 
			break; 
			case 3:error_msg += "设置了timeout值，获取位置超时了"; 
			break; 
		}
		// var error_shuoming = "<p>返回获取位置的状态："
		// 	+"<p>0  :  不包括其他错误编号中的错误</p>"
		// 	+"<p>1  :  用户拒绝浏览器获取位置信息</p>"
		// 	+"<p>2  :  尝试获取用户信息，但失败了</p>"
		// 	+"<p>3  :   设置了timeout值，获取位置超时了</p>"

		document.getElementById("error_info").innerHTML = error_msg;
		// document.getElementById("shuoming").innerHTML = error_shuoming;
      }, {
          enableHighAcuracy: false, //位置是否精确获取
          timeout: 5000,            //获取位置允许的最长时间
          maximumAge: 1000          //多久更新获取一次位置
        })
  </script>
  <script>
	function copyText() {
	  var text = document.querySelector("#sys_lng_lat").textContent;
	  //var text = "要复制的文本";
	  navigator.clipboard.writeText(text).then(function() {
		var retext = "经纬度："+text+"已复制到剪贴板";
		alert(retext);
	  }, function(err) {
		alert("无法复制文本: ", err);
	  });
	}
</script>
</body>
</html>
